<template>
  <div class="app-container">
    <div class="table-action-wrapper">
      <el-button @click="beforeAddContent" style="margin-bottom: 20px"
        >添加图文</el-button
      >
      <el-input
        placeholder="文章标题(只在本页搜索，不在数据库查询)"
        v-model="filter"
        @change="handleFilterChange"
        style="margin-left: 20px; width: 400px"
      >
        <el-button slot="append" icon="el-icon-search"></el-button>
      </el-input>

      <el-button
        @click="handleFilterReset"
        style="margin-left: 20px"
        type="primary"
        >重置</el-button
      >
    </div>
    <el-table
      v-loading="listLoading"
      :data="filterList"
      element-loading-text="Loading"
      border
      highlight-current-row
    > 
    <el-table-column label="ID" width="50" align="center">
      <template slot-scope="scope">
        <span>{{(currPage - 1) * pageSize + scope.$index + 1}}</span>
      </template>
    </el-table-column>
      <el-table-column label="标题">
        <template slot-scope="scope">
          <div v-html="scope.row.title"></div>
        </template>
      </el-table-column>
      <el-table-column width="200" align="center" label="发表日期"
        >
        <template slot-scope="scope">
          {{ formatDate(scope.row.create_at)}}
        </template>
      </el-table-column>
      <el-table-column width="140" align="center" label="文章类型"
        >
        <template slot-scope="scope">
          <el-tag size="medium" type="success">{{ scope.row.tag }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" label="置顶">
        <template slot-scope="scope">
          <i
            style="font-size: 22px"
            class="el-icon-upload2"
            v-if="scope.row.top == 0"
          ></i>
          <i
            style="font-size: 22px; color: #409eff"
            class="el-icon-upload2"
            v-else
          ></i>
        </template>
      </el-table-column>
      <el-table-column width="80" align="center" label="语言"
        >语言
        <template slot-scope="scope">
          <el-tag size="medium" v-if="scope.row.i18n == 'zh'" >{{ scope.row.i18n }}</el-tag>
          <el-tag size="medium" type="warning" v-else >{{ scope.row.i18n }}</el-tag>

        </template>
      </el-table-column>
      <el-table-column width="200" label="操作">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="beforeUpdataContent(scope.row)"
            style="margin-right: 15px"
            >编辑</el-button
          >

          <el-popconfirm
            @onConfirm="handleDeletContent(scope.row)"
            title="确定删除吗？"
          >
            <el-button slot="reference" size="mini" type="danger"
             :disabled="scope.row.tag == 'introduction' || scope.row.tag == 'achievement'" >删除</el-button
            >
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top: 15px; text-align: center">
      <el-pagination
        v-if="total != 0"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currPage"
        :page-sizes="[10, 20, 50, 500]"
        :page-size="pageSize"
        layout="sizes, prev, pager, next"
        :total="total">
      </el-pagination>
    </div>
    <el-drawer
      :with-header="false"
      title="文章信息"
      :visible.sync="drawer"
      direction="rtl"
      size="1200px"
    >
      <el-form style="margin-top:15px" :model="contentObj" label-width="80px">
        <el-form-item label="标题类型">
          <el-input
            style="width: 400px; margin-right: 20px"
            v-model="contentObj.title"
          />
          <el-select v-model="contentObj.tag">
            <el-option label="个人简介" value="introduction"></el-option>
            <el-option label="研究成果" value="achievement"></el-option>
            <el-option label="新闻通知" value="news"></el-option>
            <el-option label="团建活动" value="activity"></el-option>
          </el-select>

          <el-switch
            style="margin-left: 20px"
            active-text="置顶"
            v-model="contentObj.top"
          >
          </el-switch>
        </el-form-item>
        <el-form-item label="文章内容">
          <TinyEditor :ref="editorRef" v-model="contentObj.content" />
        </el-form-item>
        <el-form-item label="文章特征">
          <el-date-picker
            v-model="contentObj.create_at"
            type="date"
            value-format="timestamp"
            placeholder="选择日期"
          >
          </el-date-picker>
          <el-select style="margin: 0 20px" v-model="contentObj.i18n">
            <el-option label="中文" value="zh"></el-option>
            <el-option label="英文" value="en"></el-option>
          </el-select>
          <el-button
            type="success"
            @click="handleUpdateContent"
            v-if="contentObj.id"
            >更新</el-button
          >
          <el-button type="primary" @click="handleAddContent" v-else
            >添加</el-button
          >
        </el-form-item>
      </el-form>
    </el-drawer>
  </div>
</template>

<script>
import {
  addContent,
  deleteContent,
  getContentsByOffset,
  updateContent,
} from "@/api/content";
import TinyEditor from "@/components/Editor/tiny";


export default {
  components: { TinyEditor },
  data() {
    return {
      list: [],
      listLoading: true,
      drawer: false,
      editorRef: undefined,
      contentObj: {
        title: "",
        tag: "news",
        top: false,
        create_at: "",
        content: "",
        i18n: "zh",
      },
      host: process.env.VUE_APP_BASE_API,
      filter: "",
      filterList: [],
      currPage: 1,
      pageSize: 20,
      total: 0,
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    fetchData() {
      this.listLoading = true;
      this.pageTotal = 0;
      getContentsByOffset(this.currPage, this.pageSize).then((res) => {
        this.list = res.data.lists;
        this.filterList = this.list;
        this.total = res.data.total;
        this.listLoading = false;
      });
    },

    handleCurrentChange(val) {
        this.currPage = val
        this.fetchData()
    },

    handleSizeChange(val) {
      this.pageSize = val
      this.currPage = 1
      this.fetchData()
    },

    handleFilterChange(val) {
      if (val.length == 0) {
        this.filterList = this.list;
      }
      let filterList = [];
      this.list.map((item) => {
        if (item.title.indexOf(val) > -1) {
          filterList.push(item);
        }
      });
      this.filterList = filterList;
    },
    handleFilterReset() {
      this.filter = "";
      this.filterList = this.list;
    },
    beforeAddContent() {
      if (this.contentObj.id) {
        this.contentObj = {
          title: "",
            tag: "news",
            top: false,
            create_at: "",
            content: "",
            i18n: "zh",
        };
      }
      this.drawer = true;
    },
    beforeUpdataContent(obj) {
      this.contentObj = JSON.parse(JSON.stringify(obj));
      this.contentObj.top = obj.top == 1;
      this.contentObj.create_at *= 1000
      this.drawer = true;
    },
    handleAddContent() {
      let tmp = JSON.parse(JSON.stringify(this.contentObj));
      tmp.top = tmp.top ? "1" : "0";
      tmp.create_at = tmp.create_at / 1000 + ""
      addContent(tmp).then((res) => {
        this.drawer = false;
        this.fetchData();
      });
    },

    handleUpdateContent() {
      let tmp = JSON.parse(JSON.stringify(this.contentObj));
        tmp.top = tmp.top ? "1" : "0";
      tmp.create_at = tmp.create_at / 1000 + ""
      tmp.content = tmp.content.replaceAll("'", "\\'")
    //   return
      let id = tmp.id;
      delete tmp.id;
      delete tmp.i18n;

      updateContent(id, JSON.stringify(tmp)).then((res) => {
        this.drawer = false;
        this.fetchData();
      });
    },

    handleDeletContent(obj) {
      deleteContent(obj.id).then((res) => {
        if (res.code && res.code == 200) {
          this.fetchData();
        }
      });
    },

    formatDate(s) {
        var now = new Date(s * 1000)
        var year = now.getFullYear();
        var month = now.getMonth() + 1;
        var date = now.getDate();
        return year + "-" + month + "-" + date;
    }
  }
}
</script>
<style>
.el-table th.gutter {
  /* 
    * 解决element-ui 表格篡位的问题 👇 
    */
  display: table-cell !important;
}
.el-drawer__wrapper {
    z-index: 1111 !important;
}
.v-modal {
    z-index: 1100 !important;
}
</style>